<template>
	<view class="approval-container">
		<!-- 状态筛选tabs -->
		<u-tabs :list="tabList" :current="current" @change="tabChange" :is-scroll="false" active-color="#2979ff"
			bar-width="50"></u-tabs>

		<!-- 搜索栏 -->
		<view class="search-box">
			<u-search v-model="queryParams.keyword" placeholder="单号/标题/申请人" :show-action="false" @search="search"
				@custom="search"></u-search>
		</view>

		<!-- 列表内容 -->
		<scroll-view class="scroll-view" scroll-y @scrolltolower="loadMore" @refresherrefresh="refresh"
			refresher-enabled :refresher-triggered="isRefreshing" lower-threshold="50">
			<view class="approval-list">
				<view class="approval-item" v-for="(item) in approvalList" :key="item.id">
					<view class="approval-header">
						<view class="approval-title">{{ item.title }}</view>
						<view class="approval-status" :class="`status-${item.auidStatue}`">
							{{ getStatusText(item.auidStatue) }}
						</view>
					</view>

					<view class="approval-info">
						<view class="info-item">
							<u-icon name="file" size="14" color="#666"></u-icon>
							<text class="info-text">{{ item.billCode }}</text>
						</view>
						<view class="info-item">
							<u-icon name="calendar" size="14" color="#666"></u-icon>
							<text class="info-text">{{ item.billDate }}</text>
						</view>
						<view class="info-item">
							<u-icon name="share" size="14" color="#666"></u-icon>
							<text class="info-text">{{ item.enterpName }}</text>
						</view>
						<view class="info-item">
							<u-icon name="account" size="14" color="#666"></u-icon>
							<text class="info-text">{{ item.creatorUserName }}</text>
						</view>
						<view class="info-item">
							<u-icon name="rmb-circle" size="14" color="#666"></u-icon>
							<text class="info-text">¥{{ item.costAmt }}</text>
						</view>
						<view class="info-item" v-if="item.summary">
							<u-icon name="chat" size="14" color="#666"></u-icon>
							<text class="info-text">{{ item.summary }}</text>
						</view>
					</view>

					<view class="approval-footer">
						<text class="create-time">提交时间：{{ formatDate(item.creatorTime) }}</text>
						
						<view class="action-btns">
							<u-button v-if="item.auidStatue == 1" type="success" size="mini" @click="approveItem(item)" class="action-btn approve-btn">
								<u-icon name="checkmark" size="14" color="#fff" class="btn-icon"></u-icon>审批
							</u-button>
							<!-- <u-button type="error" size="mini" @click="rejectItem(item)" class="action-btn reject-btn">
								<u-icon name="close" size="14" color="#fff" class="btn-icon"></u-icon>驳回
							</u-button> -->
							<u-button type="primary" size="mini" @click="viewDetail(item)" class="action-btn detail-btn">
								<u-icon name="file-text" size="14" color="#fff" class="btn-icon"></u-icon>详情
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 空数据提示 -->
		<view class="empty-box" v-if="approvalList.length === 0 && !isLoading">
			<image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image>
			<text class="empty-text">暂无审批记录</text>
		</view>
		
		<!-- 驳回弹窗 -->
		<u-popup v-model="rejectModal.show" mode="center" width="80%" :mask-close-able="false">
			<view class="reject-modal">
				<view class="reject-modal-header">
					<text class="reject-modal-title">{{ rejectModal.title }}</text>
				</view>
				<view class="reject-modal-body">
					<text class="reject-modal-content">{{ rejectModal.content }}</text>
					<u-input v-model="rejectModal.reason" type="textarea" placeholder="请输入驳回理由" :height="100" :border="true" />
				</view>
				<view class="reject-modal-footer">
					<u-button size="medium" @click="cancelReject">取消</u-button>
					<u-button type="primary" size="medium" @click="confirmReject">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前选中tab
				current: 0,
				// tab列表
				tabList: [{
						name: '待审批',
						value: 1
					},
					{
						name: '已审批',
						value: 2
					},
					{
						name: '已驳回',
						value: -1
					},
					{
						name: '全部',
						value: undefined
					}
				],
				// 审批列表
				approvalList: [],
				// 分页参数
				pageNum: 1,
				pageSize: 10,
				total: 0,
				// 加载状态
				isLoading: false,
				isRefreshing: false,
				loadMoreStatus: 'more', // more-加载前 loading-加载中 noMore-没有更多了
				// 查询参数
				queryParams: {
					statue: 1, // my待我审批, approved已审批, all全部
					keyword: undefined
				},
				// 驳回弹窗
				rejectModal: {
					show: false,
					title: '驳回理由',
					content: '请输入驳回此申请的理由：',
					reason: '',
					item: null
				}
			}
		},
		onLoad() {
			this.getApprovalList()
		},
		methods: {
			// 获取审批列表
			getApprovalList(type = 'add') {
				if (this.isLoading) return

				this.isLoading = true
				var query = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.queryParams
				}
				
				// 实际开发中调用对应的审批列表接口
				this.$u.api.approveList(query).then(res => {
					this.total = res.data.pagination.total

					// 根据类型处理数据
					if (type === 'refresh') {
						this.approvalList = res.data.list
						this.isRefreshing = false
					} else {
						this.approvalList = [...this.approvalList, ...res.data.list]
					}

					// 判断是否还有更多数据
					if (this.approvalList.length >= this.total) {
						this.loadMoreStatus = 'noMore'
					} else {
						this.loadMoreStatus = 'more'
					}

					this.isLoading = false
				}).catch(err => {
					this.isLoading = false
					this.isRefreshing = false
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				})
			},
			
			// 下拉刷新
			refresh() {
				this.isRefreshing = true
				this.pageNum = 1
				this.loadMoreStatus = 'more'
				this.getApprovalList('refresh')
			},

			// 上拉加载更多
			loadMore() {
				if (this.loadMoreStatus !== 'more') return

				this.loadMoreStatus = 'loading'
				this.pageNum += 1
				this.getApprovalList()
			},

			// Tab切换
			tabChange(index) {
				this.current = index
				this.queryParams.statue = this.tabList[index].value
				this.pageNum = 1
				this.approvalList = []
				this.loadMoreStatus = 'more'
				this.getApprovalList('refresh')
			},

			// 搜索
			search() {
				this.pageNum = 1
				this.approvalList = []
				this.loadMoreStatus = 'more'
				this.getApprovalList('refresh')
			},
			
			// 查看详情
			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/purch/approvepro/auditForm?billId=${item.billId}&id=${item.id}&isDetail=${true}`
				})
			},
			
			// 审批通过
			approveItem(item) {
				uni.navigateTo({
					url: `/pages/purch/approvepro/auditForm?billId=${item.billId}&id=${item.id}&isDetail=${false}`
				})
			},
			
			// 打开驳回弹窗
			rejectItem(item) {
				this.rejectModal.item = item
				this.rejectModal.reason = ''
				this.rejectModal.show = true
			},
			
			// 取消驳回
			cancelReject() {
				this.rejectModal.show = false
				this.rejectModal.item = null
			},
			
			// 确认驳回
			confirmReject() {
				if (!this.rejectModal.reason.trim()) {
					uni.showToast({
						title: '请输入驳回理由',
						icon: 'none'
					})
					return
				}
				
				const item = this.rejectModal.item
				if (!item) return
				
				uni.showLoading({
					title: '处理中...'
				})
				
				// 实际开发中调用驳回接口
				this.$u.api.approveReject({
					billId: item.billId,
					reason: this.rejectModal.reason
				}).then(res => {
					this.rejectModal.show = false
					uni.hideLoading()
					
					if (res.code === 200) {
						uni.showToast({
							title: '已驳回',
							icon: 'success'
						})
						// 刷新列表
						this.getApprovalList('refresh')
					} else {
						uni.showToast({
							title: res.msg || '操作失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					this.rejectModal.show = false
					uni.hideLoading()
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			
			// 获取状态文本
			getStatusText(statue) {
				switch (statue) {
					case 0:
						return '待提交'
					case 1:
						return '待审批'
					case 2:
						return '已通过'
					case -1:
						return '已驳回'
					default:
						return '未知状态'
				}
			},

			// 格式化日期
			formatDate(date) {
				if (!date) return ''
				const d = new Date(date)
				const year = d.getFullYear()
				const month = (d.getMonth() + 1).toString().padStart(2, '0')
				const day = d.getDate().toString().padStart(2, '0')
				const hour = d.getHours().toString().padStart(2, '0')
				const minute = d.getMinutes().toString().padStart(2, '0')
				const seconds = d.getSeconds().toString().padStart(2, '0')
				return `${year}-${month}-${day} ${hour}:${minute}:${seconds}`
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.approval-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.search-box {
		padding: 10px;
		background-color: #ffffff;
	}

	.scroll-view {
		flex: 1;
		width: 100%;
	}

	.approval-list {
		padding: 10px;
	}

	.approval-item {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 10px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.approval-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #f0f0f0;
	}

	.approval-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.approval-status {
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.status-0 {
		background-color: #f2f2f2;
		color: #999999;
	}

	.status-1 {
		background-color: #e6f7ff;
		color: #ffc107;
	}

	.status-2 {
		background-color: #f6ffed;
		color: #55aaff;
	}

	.status-3 {
		background-color: #fff2f0;
		color: #4cd964;
	}

	.status--1 {
		background-color: #fff2f0;
		color: #ff4f6f;
	}

	.approval-info {
		margin-bottom: 10px;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.info-text {
		margin-left: 5px;
		font-size: 14px;
		color: #666666;
	}

	.approval-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
	}

	.create-time {
		font-size: 12px;
		color: #999999;
	}

	.action-btns {
		display: flex;
		align-items: center;
	}

	.action-btn {
		margin-left: 8px;
		padding: 0 10px;
		height: 32px;
		border-radius: 4px;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.approve-btn {
		background: linear-gradient(45deg, #19be6b, #21d07c);
		box-shadow: 0 2px 5px rgba(25, 190, 107, 0.2);
	}
	
	.reject-btn {
		background: linear-gradient(45deg, #fa3534, #ff5959);
		box-shadow: 0 2px 5px rgba(250, 53, 52, 0.2);
	}

	.detail-btn {
		background: linear-gradient(45deg, #2979ff, #3e8df7);
		box-shadow: 0 2px 5px rgba(41, 121, 255, 0.2);
	}

	.btn-icon {
		margin-right: 4px;
	}

	.empty-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.empty-image {
		width: 120px;
		height: 120px;
		margin-bottom: 16px;
	}

	.empty-text {
		font-size: 14px;
		color: #999999;
	}
	
	/* 驳回弹窗样式 */
	.reject-modal {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

	.reject-modal-header {
		padding: 15px;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.reject-modal-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.reject-modal-body {
		padding: 15px;
	}

	.reject-modal-content {
		font-size: 14px;
		color: #666;
		margin-bottom: 15px;
		display: block;
	}

	.reject-modal-footer {
		display: flex;
		padding: 10px 15px 15px;
	}

	.reject-modal-footer button {
		flex: 1;
		margin: 0 5px;
	}
</style>
